import React from 'react';
import { inject, observer } from "mobx-react";
import '../styles/appleBasket.scss';
import '../styles/appleItem.scss';

@inject("appleBasket")
@observer
class AppleBusket extends React.Component {
    render () {
        const { isPicking, toEatApple, toAddApple, hasAppleArr, hasEatArr } = this.props.appleBasket
        const currentAppleNum = hasAppleArr.length
        const currentAppleWeight = hasAppleArr.reduce((prev, cur) => {
            prev += cur.weight
            return prev
        }, 0)
        const hasEatArrNum = hasEatArr.length
        const currentEatWeight = hasEatArr.reduce((prev, cur) => {
            prev += cur.weight
            return prev
        }, 0)
        const empty = hasAppleArr.length > 0 ? null : <div className="empty-tip" key="empty">苹果篮子空空如也</div>
        return (
            <div className="appleBusket">
                <div className="title">苹果篮子</div>
                <div className="stats">
                    <div className="section">
                        <div className="head">当前</div>
                        <div className="content">{currentAppleNum}个苹果，{currentAppleWeight}克
                        </div>
                    </div>
                    <div className="section">
                        <div className="head">已吃掉</div>
                        <div className="content">{hasEatArrNum}个苹果，{currentEatWeight}克</div>
                    </div>
                </div>

                <div className="appleList">
                    {
                        hasAppleArr.map(apple => (
                            <div className="appleItem" key={apple.id}>
                                <div className="apple"><img src={require('../images/apple.png')} alt="" /></div>
                                <div className="info">
                                    <div className="name">红苹果 - {apple.id}号</div>
                                    <div className="weight">{apple.weight}克</div>
                                </div>
                                <div className="btn-div">
                                    <button onClick={() => { toEatApple(apple.id) }}> 吃掉 </button>
                                </div>
                            </div>
                        ))
                    }
                    {
                        empty
                    }
                </div>

                <div className="btn-div">
                    <button className={isPicking ? 'disabled' : ''} onClick={toAddApple} >{!isPicking ? '采摘' : "采摘中..."}</button>
                </div>
            </div>
        );
    }
}



export default AppleBusket;